import React, { forwardRef } from "react";
import { ShapeBase, ShapeType } from "../../lib";

const Flower12: ShapeType = forwardRef((props, ref) => {
  const ShapeId = "flower-12";

  return (
    <ShapeBase {...props} shapeName={ShapeId} ref={ref}>
      <g clipPath={`url(#cs_clip_1_${ShapeId})`}>
        <mask
          id={`cs_mask_1_${ShapeId}`}
          style={{ maskType: "alpha" }}
          width="200"
          height="200"
          x="0"
          y="0"
          maskUnits="userSpaceOnUse">
          <path
            fill="#fff"
            d="M80.319 32.5C76.102 17.5 81.824 0 99.999 0c18.177 0 23.899 17.5 19.682 32.5-3.115 11.077-11.595 37.15-15.818 50.03-.483 1.474.471 3.022 1.902 3.618 1.431.596 3.155.152 3.855-1.23 6.122-12.094 18.562-36.53 24.193-46.564 7.625-13.589 24.045-21.917 36.897-9.065 12.853 12.853 4.525 29.273-9.064 36.898-10.035 5.63-34.47 18.071-46.563 24.193-1.383.7-1.827 2.424-1.231 3.855.596 1.431 2.144 2.385 3.617 1.902 12.881-4.223 38.954-12.704 50.031-15.818 15-4.217 32.5 1.505 32.5 19.68 0 18.177-17.5 23.899-32.5 19.682-11.077-3.115-37.15-11.595-50.031-15.818-1.473-.483-3.021.471-3.617 1.902-.596 1.431-.152 3.155 1.231 3.855 12.093 6.122 36.528 18.563 46.563 24.193 13.589 7.625 21.917 24.045 9.065 36.898-12.853 12.852-29.274 4.524-36.898-9.065-5.63-10.035-18.071-34.47-24.193-46.563-.7-1.383-2.424-1.827-3.855-1.231-1.431.596-2.385 2.144-1.902 3.617 4.223 12.881 12.704 38.954 15.818 50.031 4.217 15-1.505 32.5-19.681 32.5-18.176 0-23.898-17.5-19.681-32.5 3.114-11.077 11.595-37.15 15.818-50.031.483-1.473-.47-3.021-1.902-3.617-1.43-.596-3.155-.152-3.855 1.231-6.122 12.093-18.562 36.528-24.193 46.563-7.624 13.589-24.045 21.917-36.897 9.065-12.853-12.853-4.525-29.273 9.064-36.898 10.035-5.63 34.47-18.071 46.563-24.193 1.383-.7 1.827-2.424 1.23-3.855-.595-1.431-2.143-2.385-3.616-1.902-12.88 4.223-38.954 12.704-50.031 15.818C17.5 123.898 0 118.176 0 100c0-18.176 17.5-23.898 32.5-19.681 11.077 3.114 37.15 11.595 50.03 15.818 1.474.483 3.022-.47 3.618-1.902.596-1.43.153-3.155-1.23-3.855-12.094-6.122-36.53-18.563-46.564-24.193-13.589-7.625-21.917-24.045-9.065-36.898 12.853-12.852 29.274-4.524 36.898 9.065 5.63 10.035 18.071 34.47 24.193 46.563.7 1.383 2.424 1.827 3.855 1.23 1.431-.595 2.385-2.143 1.902-3.616C91.914 69.65 83.433 43.577 80.319 32.5z"></path>
        </mask>
        <g mask={`url(#cs_mask_1_${ShapeId})`}>
          <path fill="#fff" d="M200 0H0v200h200V0z"></path>
          <path fill="#FFE99F" d="M200 0H0v200h200V0z"></path>
          <g filter="url(#filter0_f_748_4604)">
            <path fill="#18A0FB" d="M226-7H109v118h117V-7z"></path>
            <path fill="#FFC700" d="M206 110H60v143.625h146V110z"></path>
            <ellipse
              cx="72.5"
              cy="30.5"
              fill="#FF00D6"
              rx="52.5"
              ry="49.5"></ellipse>
          </g>
        </g>
      </g>
      <defs>
        <filter
          id="filter0_f_748_4604"
          width="331"
          height="397.625"
          x="-42.5"
          y="-81.5"
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse">
          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
          <feBlend
            in="SourceGraphic"
            in2="BackgroundImageFix"
            result="shape"></feBlend>
          <feGaussianBlur
            result="effect1_foregroundBlur_748_4604"
            stdDeviation="31.25"></feGaussianBlur>
        </filter>
        <clipPath id={`cs_clip_1_${ShapeId}`}>
          <path fill="#fff" d="M0 0H200V200H0z"></path>
        </clipPath>
      </defs>
    </ShapeBase>
  );
});

Flower12.displayName = "Flower12";
export { Flower12 };
